<template>
    <Card dis-hover :bordered='false'>
        <Tabs value="name1" type="card" :animated="false">
            <TabPane label="抖音质量患者" name="name1">
                <Form ref="form" inline :model="data" label-position="left">
                    <FormItem>
                        <DatePicker :editable="false" type="daterange" v-model="data.date" placeholder="请选择创建日期" />
                    </FormItem>
                    <FormItem>
                        <Input v-model="data.name" v-width="260" placeholder="请输入患者姓名/手机号/诊疗号" />
                    </FormItem>
                    <FormItem>
                        <Select v-width="100" v-model="data.diagnosis" placeholder="患者状态" element-id="diagnosis"
                            clearable>
                            <Option :value="0">失效</Option>
                            <Option :value="1">待跟踪</Option>
                            <Option :value="2">预约</Option>
                            <Option :value="3">到诊</Option>
                            <Option :value="4">已到老患者</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Select v-width="80" v-model="data.personnel" placeholder="归属人" element-id="personnel"
                            clearable>
                            <Option :value="0">高玲</Option>
                            <Option :value="1">王艳</Option>
                            <Option :value="2">刘志强</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Select v-width="100" v-model="data.disease" placeholder="病种" element-id="diagnosis" clearable>
                            <Option :value="0">白癜风</Option>
                            <Option :value="1">非白</Option>
                            <Option :value="2">皮杂</Option>
                            <Option :value="3">白斑待查</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Select v-width="180" v-model="data.channel" multiple placeholder="渠道来源" element-id="diagnosis"
                            clearable>
                            <Option :value="0">百度</Option>
                            <Option :value="1">门户</Option>
                            <Option :value="2">优化</Option>
                            <Option :value="3">广告</Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Select v-model="model7" filterable multiple placeholder="请先选择归属人再选择标签" :max-tag-count="3">
                            <OptionGroup label="营销">
                                <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}
                                </Option>
                            </OptionGroup>
                            <OptionGroup label="活动">
                                <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}
                                </Option>
                            </OptionGroup>
                        </Select>
                    </FormItem>
                </Form>
                <Button type="primary" ghost icon="md-add" @click="handleOpenCreate">添加患者</Button>
                <div class="ivu-inline-block ivu-fr">
                    <Dropdown @on-click="handleChangeTableSize" trigger="click">
                        <Tooltip class="ivu-ml" content="密度" placement="top">
                            <i-link>
                                <Icon type="md-list" />
                            </i-link>
                        </Tooltip>
                        <DropdownMenu slot="list">
                            <DropdownItem name="default" :selected="tableSize === 'default'">默认</DropdownItem>
                            <DropdownItem name="large" :selected="tableSize === 'large'">宽松</DropdownItem>
                            <DropdownItem name="small" :selected="tableSize === 'small'">紧凑</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                    <Tooltip class="ivu-ml" :content="tableFullscreen ? '退出全屏' : '全屏'" placement="top">
                        <i-link @click.native="handleFullscreen">
                            <Icon
                                :custom="tableFullscreen ? 'i-icon i-icon-exit-full-screen' : 'i-icon i-icon-full-screen'" />
                        </i-link>
                    </Tooltip>
                    <Tooltip class="ivu-ml" content="刷新" placement="top">
                        <i-link @click.native="handleRefresh">
                            <Icon custom="i-icon i-icon-refresh" />
                        </i-link>
                    </Tooltip>
                    <Dropdown trigger="click">
                        <Tooltip class="ivu-ml" content="列设置" placement="top">
                            <i-link>
                                <Icon type="md-options" />
                            </i-link>
                        </Tooltip>
                        <DropdownMenu slot="list">
                            <div class="ivu-p-8">列展示</div>
                            <Divider size="small" class="ivu-mt-8 ivu-mb-8" />
                            <li class="ivu-dropdown-item" v-for="item in columns" :key="item.title" v-if="item.title"
                                @click="item.show = !item.show">
                                <Checkbox v-model="item.show"></Checkbox>
                                <span>{{ item.title }}</span>
                            </li>
                        </DropdownMenu>
                    </Dropdown>
                </div>
                <Table ref="table" class="ivu-mt" :size="tableSize" @on-sort-change="handleSortChange"
                    @on-select="handleSelect" @on-select-cancel="handleSelectCancel" @on-select-all="handleSelectAll"
                    @on-select-all-cancel="handleClearSelect" :columns="columns" :data="list" :loading="loading">
                </Table>
            </TabPane>
            <TabPane label="重点跟进" name="name2">标签二的内容</TabPane>
            <TabPane label="节后回访" name="name3">标签三的内容</TabPane>
            <Button type="primary" @click="handleTabsAdd" size="small" slot="extra">增加</Button>
        </Tabs>
    </Card>
</template>
<script>
    // import { viewTable } from '@api/account.js'
    export default {
        components: {},
        data() {
            return {
                columns: [
                    {
                        type: 'selection',
                        minWidth: 60,
                        align: 'center',
                        show: true,
                        fixed: 'left'
                    },
                    {
                        title: '基本信息',
                        key: 'basic',
                        slot: 'info',
                        minWidth: 135,
                        fixed: 'left'
                    },
                    // {
                    //     title: '微信号',
                    //     key: 'wx',
                    //     minWidth: 108
                    // },
                    {
                        title: '患者状态',
                        key: 'state',
                        slot: 'state',
                        minWidth: 100
                    },
                    {
                        title: '归属人',
                        key: 'belonger',
                        minWidth: 80
                    },
                    {
                        title: '预到时间',
                        key: 'preArrival',
                        sortable: true,
                        minWidth: 118
                    },
                    {
                        title: '回访次数',
                        key: 'numberVisits',
                        sortable: true,
                        minWidth: 118
                    },
                    {
                        title: '患者标签',
                        key: 'label',
                        slot: 'label',
                        minWidth: 138
                    },
                    {
                        title: '城市',
                        key: 'city',
                        minWidth: 100
                    },
                    {
                        title: '病种',
                        key: 'disease',
                        minWidth: 100
                    },
                    {
                        title: '来源',
                        minWidth: 120,
                        slot: 'channel'
                    },
                    {
                        title: '创建时间',
                        key: 'foundTime',
                        minWidth: 135,
                        sortable: true
                    },
                    {
                        title: '备注',
                        minWidth: 150,
                        key: 'remarks'
                    },
                    {
                        title: '操作',
                        width: 150,
                        slot: 'action',
                        fixed: 'right'
                    }
                ],
                list: [],
                loading: false,
                cityList: [
                    {
                        value: '在乎费用',
                        label: '在乎费用'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '敏感',
                        label: '敏感'
                    },
                    {
                        value: '远程',
                        label: '远程'
                    }
                ],
                cityList1: [
                    {
                        value: '复诊',
                        label: '复诊'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '权威',
                        label: '权威'
                    }
                ],
                cityList2: [
                    {
                        value: '专家活动',
                        label: '专家活动'
                    },
                    {
                        value: '折扣活动',
                        label: '折扣活动'
                    },
                    {
                        value: '援助活动',
                        label: '援助活动'
                    }
                ],
                model7: '',
                positionList: [
                    {
                        value: '头部',
                        label: '头部'
                    },
                    {
                        value: '面部',
                        label: '面部'
                    },
                    {
                        value: '四肢',
                        label: '四肢'
                    },
                    {
                        value: '脚部',
                        label: '脚部'
                    }
                ],
                data: {
                    name: '',
                    date: '',
                    consultant: '',
                    personnel: '',
                    diagnosis: '',
                    treatment: '',
                    risk: '',
                    disease: '',
                    channel: ''
                },
                rules: {},
                selectedData: [],
                current: 1,
                limit: 10,
                total: 0,
                sortType: 'normal',
                sortKey: '',
                tableSize: 'default',
                tableFullscreen: false,
                userInfo: null,
                userInfoString: '',
                userInfoFormReady: true
            }
        },
        computed: {
            // 动态设置列
            tableColumns() {
                const columns = [...this.columns]
                return columns.filter(item => item.show)
            },
            offset() {
                return (this.current - 1) * this.limit
            }
        },
        methods: {
            handleTabsAdd() {
                // console.log(666)
            },
            viewTableData() {
                // this.loading = true
                // viewTable().then(async(res) => {
                //     console.log(res)
                //     this.list = res.list
                // }).finally(() => {
                //     this.loading = false
                // })
            },
            // 改变表格尺寸
            handleChangeTableSize(size) {
                this.tableSize = size
            },
            // 表格全屏
            handleFullscreen() {
                this.tableFullscreen = !this.tableFullscreen
                this.$emit('on-fullscreen', this.tableFullscreen)
            },
            // 刷新表格数据
            handleRefresh() {
                this.viewTableData()
            },
            // 切换页码
            handleChangePage(page) {
                this.current = page
                this.viewTableData()
            },
            // 切换每页条数
            handleChangePageSize(size) {
                this.current = 1
                this.limit = size
                this.viewTableData()
            },
            // 排序
            handleSortChange({ key, order }) {
                this.current = 1
                this.sortType = order
                this.sortKey = key
                this.viewTableData()
            },
            // 选中一项，将数据添加至已选项中
            handleSelect(selection, row) {
                this.selectData.push(row)
            },
            // 取消选中一项，将取肖的数据从选项中删除
            handleSelectCancel(selection, row) {
                const index = this.selectedData.findIndex(item => item.id === row.id)
                this.selectedData.splice(index, 1)
            },
            // 当前页全选时，判断已选数据是否存在，不存在测添加
            handleSelectAll(selection) {
                selection.forEach(item => {
                    if (this.selectionData.findIndex(i => i.id === item.id) < 0) {
                        this.selectedData.push(item)
                    }
                })
            },
            // 清空所有已选项
            handleClearSelect() {
                this.selectedData = []
            },
            // 查找单一用户信息
            handleGetuser(id) {
                return this.list.find(item => item.id === id)
            },
            // 删除用户
            handleDelete(id) {
                if (this.loading) return
                this.$Modal.confirm({
                    title: '删除确认',
                    content: `您确认要移除用户 <strong>${this.handleGutUser(id)}</strong>?`,
                    loading: true,
                    onOk: () => {
                        DeleteUser({
                            id
                        }).then(res => {
                            this.$Modal.remove()
                            this.$Message.error(res.msg)
                            // 完成后刷新数据
                            this.handleClearSelect()
                            this.handleChangePage(1)
                        })
                    }
                })
            },
            // 批量删除
            handleDeleteMultiple() {
                if (this.loading) return
                const ids = this.selectedData.map(item => item.id)
                const names = this.selectedData.map(item => item.name)
                this.$Modal.confirm({
                    title: '删除确认',
                    content: `您确认要删除用户<strong>${names}</strong>？`,
                    loading: true,
                    onOk: () => {
                        handleDeleteMultiple({
                            ids
                        }).then(res => {
                            this.$Modal.remove()
                            this.$Message.error(res.msg)
                            // 完成后刷新数据
                            // this.handleClearSelect();
                            // this.handleChangePage(1);
                        })
                    }
                })
            },
            // 编辑
            handleEdit(id) {

            },
            // 关闭编辑
            handleCloseEdit() {

            },
            // 用户详情
            handleClickRow(row) {

            },
            // 添加用户
            handleOpenCreate() {

            }
        },
        mounted() {
            this.viewTableData()
        }
    }
</script>
<style lang='less' scoped>
</style>